<template>
  <div>
    <!-- 工序管理 -->
    <div class="topBtn">
      <div class="sizeBig"><span>工序设置</span></div>
      <div>
        <el-button type="primary" @click="changeLog" style="height:36px;">
          <i class="icon-biang"></i> 工序变更日志
        </el-button>
        <el-button type="primary" @click="setProMeth" style="height:36px;"> 
          <i class="icon-setting"></i> 设置工序方法
        </el-button>
        <el-button type="primary" @click="forbidden" style="height:36px;">
          <i class="icon-close"></i>禁用
        </el-button>
        <el-button type="primary" @click="Enable" style="height:36px;">
          <i class="icon-qiy"></i>启用
        </el-button>
        <el-button type="primary" @click.native="add">
          <i class="iconfont icon-addNew"></i> 新增
        </el-button>
        <el-button type="primary" @click="edit()" icon="el-icon-edit">修改</el-button>
        <el-button type="primary" @click="remove" icon="el-icon-delete">删除</el-button>
      </div>
    </div>
    <div class="message">
      <p class="character">
        按照产品工艺要求，在系统维护对应所有的生产工序，方便MES系统做流程节点管控和生产数据采集。
        <span class="skip">查看帮助文档</span>
      </p>
    </div>

    <div class="inputcontent">
      <el-input v-model="search" placeholder="请输入内容" class="inSearch" @keydown.native.enter="init"></el-input>    
      <div class="iconSearch"></div>
    </div>

    <div class="tablesize">
      <Table :reset="reset" v-on:getId="getListId" v-on:getName="getListName" id="out-table" v-on:changeData="changedata"></Table>
    </div>

    <!-- 分页 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10,20,50,100]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="TotalNum">
      </el-pagination>
    </div>

    <!-- 新增弹出框 -->
    <el-dialog
      title="新增数据"
      :visible.sync="addDialogVisible"
      width="600px">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="formName"
        label-width="140px"
        class="demo-ruleForm">
        <el-form-item label="工序名称：" prop="name">
          <el-input v-model="ruleForm.name" style="width:350px"></el-input>
        </el-form-item>
        <el-form-item label="工序描述：" prop="description">
          <el-input v-model="ruleForm.description" style="width:350px"></el-input>
        </el-form-item>
        <el-form-item label="建议工序：" prop="wokerOrder">
          <el-input v-model="ruleForm.wokerOrder" style="width:350px"></el-input>
        </el-form-item>
        <el-form-item label="工序需要时间：" prop="needTime">
          <el-input v-model="ruleForm.needTime" style="width:350px"></el-input> 
        </el-form-item>
        <el-form-item label="工序类型ID：" prop="techTypeId">
          <!-- <el-input v-model="ruleForm.techTypeId" style="width:350px"></el-input>    -->
          <el-select v-model="ruleForm.techTypeId" placeholder="请选择工序类型ID" style="width:350px">
            <el-option 
            v-for="item in typeList"
            :key="item.TechTypeId"
            :label="item.TechTypeId +'  '+ item.Name " 
            :value="item.TechTypeId"
            ></el-option>
          </el-select>                     
        </el-form-item> 
        <el-form-item>
          <el-button @click.native="addDialogVisible=false">关闭</el-button>
          <el-button type="primary" @click="submitForm('formName')">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 修改弹出框 -->
    <el-dialog
      title="修改数据"
      :visible.sync="editDialogVisible"
      width="600px">
      <el-form
        :model="editInfo"
        :rules="rules"
        ref="editForm"
        label-width="140px"
        class="demo-ruleForm">
        <el-form-item label="工序ID：" prop="techID" v-show="false">
          <el-input v-model="editInfo.techID" style="width:350px"></el-input>
        </el-form-item>
        <el-form-item label="工序名称：" prop="name">
          <el-input v-model="editInfo.name" style="width:350px"></el-input>
        </el-form-item>
        <el-form-item label="工序描述：" prop="description">
          <el-input v-model="editInfo.description" style="width:350px"></el-input>
        </el-form-item>
        <el-form-item label="建议工序：" prop="wokerOrder">
          <el-input v-model="editInfo.wokerOrder" style="width:350px"></el-input>
        </el-form-item>
        <el-form-item label="工序需要时间：" prop="needTime">
          <el-input v-model="editInfo.needTime" style="width:350px"></el-input> 
        </el-form-item>
        <el-form-item label="工序类型ID：" prop="techTypeId">
          <!-- <el-input v-model="editInfo.techTypeId" style="width:350px"></el-input> -->
          <el-select v-model="editInfo.techTypeId" placeholder="请选择工序类型ID" style="width:350px">
            <el-option 
            v-for="item in typeList"
            :key="item.TechTypeId"
            :label="item.TechTypeId +'  '+ item.Name " 
            :value="item.TechTypeId"
            ></el-option>
          </el-select>            
        </el-form-item>
        <el-form-item>
          <el-button @click.native="editDialogVisible=false">关闭</el-button>
          <el-button type="primary" @click="editSubmitForm('editForm')">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 设置工序方法弹出框 -->
    <el-dialog title="设置工序方法" :visible.sync="dialogTableVisible" width="450px">    
      <p class="subtitle2">当前工序: {{checkedName[0]}}</p>
      <el-table
        :data="gridData"
        border
        style="width:100%"
        @selection-change="handleSelectionChange1"
        :header-cell-style="{background:'#f4f4f4'}">
        <el-table-column
          prop="MethodName"
          label="方法名"
          align="center"
          width="166">
        </el-table-column>
        <el-table-column
          prop="MethodAction"
          label="执行方法名称"
          align="center"
          width="170">
        </el-table-column>
        <el-table-column 
          type="selection"  
          align="center"     
          width="73">
        </el-table-column>
      </el-table> 
      <div class="botBtn">    
        <el-button class="quxiao" @click.native="dialogTableVisible=false">取消</el-button>
        <el-button class="queding" type="primary" @click="setSubmit()">确定</el-button>
      </div>
    </el-dialog>

    <!-- 工序变更日志 -->
    <el-dialog  title="工序变更日志" center :visible.sync="dialogLogVisible" width="600px">
      <Table1 :logData='logData'></Table1>
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange1"
          @current-change="handleCurrentChange1"
          :current-page="currentPage1"
          :page-sizes="[10,20,50,100]"
          :page-size="size1"
          layout="total, sizes, prev, pager, next, jumper"
          :total="TotalNum1">
        </el-pagination>
      </div>
      <div class="botBtn">
        <el-button class="quxiao" @click.native="dialogLogVisible=false">取消</el-button>
        <el-button class="queding" type="primary" @click="removeLogSubmit()">删除</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {getTechPageList,insertTech,updateTech,removeTech,startOrStopTech,getMethodListByTech,setMethodByTech,getTechTypeList,getTechLog } from "@/api/process"
import Table from "./components/processTable";
import Table1 from "./components/processLogTable";
import {delay} from '@/utils/autoSearch'
export default {
  name: "process",
  components: {
    Table,
    Table1
  },
  data(){
    return{
      module:'process',
      search:'',//搜索内容

      reset:[], //工序数据
      typeList:[], //工序类型列表数据
      gridData:[], //工序方法数据
      logData:[], //工序变更日志数据
      checkIds: [], //勾选的id数组
      addlist: [], //勾选传过来的数据
      checkData:[], //勾选的工序方法
      checkedName:[],

      size: 10,
      currentPage: 1,//页码
      TotalNum: 0,//数据总条数
      size1: 10,
      currentPage1: 1,//页码
      TotalNum1: 0,

      addDialogVisible: false, //新增弹出框
      editDialogVisible:false,//修改弹出框
      dialogTableVisible:false,//设置工序方法弹出框
      dialogLogVisible:false,//工序变更日志弹出框
     
      ruleForm:{
        name:'',
        description:'',
        wokerOrder:'',
        needTime:'',
        techTypeId:''
      },
      editInfo:{
        techID:"",
        name:'',
        description:'',
        wokerOrder:'',
        needTime:'',
        techTypeId:''
      },
      rules:{
        name: [
          { required: true, message: "请输入工序名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        description: [
          { required: true, message: "请输入工序描述", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        wokerOrder: [
          { required: true, message: "请输入建议工序的排序,例如：4", trigger: "blur" },
          {
            validator:(rule, value, callback) => {
              if (value == '' || value == undefined || value == null) {
                callback();
              } else if (!Number(value)) {
                callback(new Error('请输入数字'));
              } else if (value < 1 || value > 100) {
                callback(new Error('请输入[1,100]之间的数字'));
              } else {
                callback();
              }
            },
            trigger: 'change'
          }
        ],
        needTime: [
          { required: true, message: "请输入工序需要的时间", trigger: "blur" }          
        ],
        techTypeId: [
          { required: true, message: "请输入工序类型ID", trigger: "blur" }
        ]
      }
    }
  },
  watch:{
    //用来监听页面变量的改变
    //监听搜索，300ms执行一次fetchData方法（去搜索）
    search() {
      delay(() => {
        this.fetchData();
      }, 300);
    }
  },
  mounted() {
    this.init();
  },
  methods:{
    // 自动搜索的方法
    async fetchData(val){
      this.init({keyName:this.search})
    },
    handleSizeChange(size){
      this.size = size
      getTechPageList({ keyName:this.search,page:1,pageSize:this.size}).then(res => {
        if (parseInt(res.Code) === 1) {
          this.reset = res.Result.Items;
          this.TotalNum = res.Result.TotalNum  
        }
      })
    },
    handleCurrentChange(currentPage){
      this.currentPage = currentPage
      getTechPageList({ keyName:this.search,page:this.currentPage,pageSize:this.size}).then(res => {
        if (parseInt(res.Code) === 1) {
          this.reset = res.Result.Items;
          this.TotalNum = res.Result.TotalNum  
        }
      })
    },
    //请求数据  
    init() {
      this.reset = [];
      getTechPageList({ keyName:this.search,page:this.currentPage,pageSize:this.size}).then(res => {
        if (parseInt(res.Code) === 1) {
          this.reset = res.Result.Items;
          this.TotalNum = res.Result.TotalNum         
        }
      })
      //获取工序类型列表
      getTechTypeList({ keyName:'',page:1,pageSiz:1000}).then(res=>{
        if(parseInt(res.Code) === 1) {
          this.typeList = res.Result
        }
      })
    },
    getListId(listId) {
      this.checkIds = listId;
      // console.log(listId)
    },
    getListName(listName) {
      this.checkedName = listName;
      // console.log(listId)
    },
    changedata(data) {
      this.addlist = data;
      console.log(this.addlist)
    },

    // 工序变更日志   
    changeLog(){      
      this.dialogLogVisible = true
      getTechLog({businessType:10,page:1,pageSize:10}).then(res =>{
        if (parseInt(res.Code) === 1) {
          this.logData = res.Result.Items
          this.TotalNum1 = res.Result.TotalNum
        }
      })
    },
    handleSizeChange1(size1){
      this.size1 = size1
      getTechLog({businessType:10,page:1,pageSize:this.size1}).then(res =>{
        if (parseInt(res.Code) === 1) {
          this.logData = res.Result.Items
        }
      })
    },
    handleCurrentChange1(currentPage1){
      this.currentPage1 = currentPage1
      getTechLog({businessType:10,page:this.currentPage1,pageSize:this.size1}).then(res =>{
        if (parseInt(res.Code) === 1) {
          this.logData = res.Result.Items
          
        }
      })
    },
    // 弹出框勾选的数据的删除
    removeLogSubmit(){},
    //弹出框里的勾选的数据
    handleSelectionChange1(val){
      this.checkData = val
      // console.log(this.checkData)
    },
    // 设置工序方法弹出框
    setProMeth(){
      if(this.checkIds.length !== 1){
        this.$message('请勾选一项')
      }else {
        this.dialogTableVisible = true
        //  查询工序方法列表
        getMethodListByTech({techID:this.addlist[0].TechId}).then(res=>{
          if(parseInt(res.Code) === 1){
            
            this.gridData = res.Result
          }
        })
      }               
    },
    setSubmit(){
      // 设置工序方法
      if(this.checkData.length !== 1){
         this.$message('请勾选一项')
      }else {
        let data = {techID:this.addlist[0].TechId,methodID:this.checkData[0].MethodID,isDelete:0}
        setMethodByTech(data).then(res=>{
          if(res.Code === 1) {    
            this.$message({
              type: 'success',
              message:'设置工序方法成功'
            })
            this.dialogTableVisible = false
            this.init()
          }  
        })
      }        
    },
    // 新增
    add() {
      this.ruleForm = {}; 
      this.addDialogVisible = true;
      
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          insertTech(this.ruleForm).then(res => {
            if (res.Code === 1) {    
              alert('新增工序成功')     
              this.init();
              this.ruleForm={}
              this.addDialogVisible = false;
            }
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 修改
    edit(index,row){
      if(this.addlist.length !== 1){
        this.$message('请勾选一项');
      }else {
        this.editDialogVisible = true
        this.editInfo.techID = this.addlist[0].TechId
        this.editInfo.name = this.addlist[0].Name
        this.editInfo.description = this.addlist[0].Description
        this.editInfo.wokerOrder = this.addlist[0].WorkerOrder
        this.editInfo.needTime = this.addlist[0].NeedTime
        this.editInfo.techTypeId = this.addlist[0].TechTypeId
      }
    },
    editSubmitForm(editForm){
      this.$refs[editForm].validate((valid) => {
        if (valid) {
          updateTech(this.editInfo).then(res=>{
            if (parseInt(res.Code) === 1) {         
              this.$message({
                type: 'success',
                message: '修改成功'
              })
              this.editDialogVisible = false;
              this.init();
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },

    // 禁用
    forbidden() {
      if(this.checkIds.length=1){
        if(this.addlist[0].IsEnable === 0){
          this.$message('已禁用')
        }else{
          let data = {techID:this.checkIds[0],isEnable:0}
          startOrStopTech(data).then(res=>{
            if (parseInt(res.Code) === 1) {
              this.$message({
                type: 'success',
                message: '禁用成功!'
              })
              this.init()
            }
          })      
        }
      }else{
        this.$message('请勾选需要禁用的工序')
      }
    },
    // 启用
    Enable() {
      if(this.addlist.length>0){
        if(this.addlist[0].IsEnable === 1){
          this.$message('已启用')
        }else{
          let data = { techID:this.checkIds[0],isEnable:1}
          startOrStopTech(data).then(res=>{
            if (parseInt(res.Code) === 1) {
              this.$message({
                type: 'success',
                message: '启用成功!'
              })
              this.init()
            }
          })  
        }     
      }else{
        this.$message('请勾选需要启用的仓库数据')
      }
    },
    // 删除
    remove(){
      if(this.checkIds.length>0){
        this.$confirm('此操作将永久删除选中的工序, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => { 
          let data = {techID:this.addlist[0].TechId}
          removeTech(data).then(res=>{
            if(parseInt(res.Code) === 1){
              this.$message({
                type: 'success',
                message: '删除成功!' 
              }) 
              this.init()   
            } 
          })            
        }) .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });     
      }else{
        this.$message('请勾选需要删除的工序')
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.sizeBig{
    font-size: 16px;
}
.topBtn{
    height: 60px;
    width: 98%;
    margin: 0 auto;
    line-height: 60px;
    display: flex;
    justify-content: space-between;
  .icon-biang {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-bottom: 2px;
    background: url("image/biangeng .png") no-repeat;
    vertical-align: middle;
  }
  .icon-setting {
    display: inline-block;
    width: 14px;
    height: 12px;
    margin-bottom: 2px;
    background: url("image/shezhi.png") no-repeat;
    vertical-align: middle;
  }
  .icon-close{
    display: inline-block;
    width: 12px;
    height: 12px;
    margin:0 3px 2px 0;
    background: url("image/jinyong.png") no-repeat;
    vertical-align: middle;
  }
  .icon-qiy{
    display: inline-block;
    width: 13px;
    height:13px;
    margin:0 3px 2px 0;
    background: url("image/qiyong.png") no-repeat;
    vertical-align: middle;
  }
}

.message{
    width:98%;
    margin: 0 auto;
    height:60px;
    background:rgba(255,255,255,1);
    border:1px solid rgba(238,238,238,1);
    font-size:14px;
    .character{
        margin: 20px 0 21px 20px;
        color:#999999;
        .skip{ 
            color: #0095FF;
            margin-left:10px;
            cursor:pointer; 
        }
    }
}
.inputcontent {
  width: 98%;
  margin: 0 auto;
  height: 80px;
  position: relative;
  padding-top: 21px;
  box-sizing: border-box;
  .iconSearch {
    position: absolute;
    left: 277px;
    top: 30px;
    width: 20px;
    height: 20px;
    background-image: url("../system/user/image/搜索.png");
    background-repeat: no-repeat;
    cursor: pointer;
  }
  .inSearch {
    width: 308px;
    height: 40px;
  }
}
.tablesize {
  width: 98%;
  // height: 485px;
  margin: 0 auto;
  #out-table{
    border: 1px solid #eeeeee;
  }
}
.block {
  text-align: right;
  margin: 28px 20px 0 0;
}
.subtitle1{
  float: left;
  font-size: 20px;
  font-weight: 500;
  margin: 0 0 10px 10px;
}
.subtitle2{
  float: right;
  height: 0px;
  line-height: 0px;
  font-size: 16px;
  margin: 0 20px 20px 0;
}
.botBtn{
  text-align: center;
  margin-top: 20px;
  .quxiao{
    margin-right: 20px;
  }
  .queding{
    margin-left: 20px;
  }
}
</style>

